<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="flex-layout.css" />
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<style type="text/css">
			* {
				box-sizing: border-box;
				outline: none;
			}
			
			html,
			body {
				margin: 0;
				width: 100%;
				height: 100%;
				background: #000000;
			}
			
			.header {
				background: rgb(219, 62, 62);
				height: 60px;
				width: 100%;
			}
			
			.youdao {
				position: absolute;
				top: 60px;
				left: 0px;
				right: 0px;
				bottom: 0px;
			}
			
			iframe {
				border: none;
				overflow: hidden;
				width: 100%;
				height: 100%;
			}
			
			.qclogo {
				width: 80px;
				height: 23px;
			}
			
			.prev {
				width: 16px;
				height: 16px;
				background-position: center;
				background: url('icons/prev.png') no-repeat;
				background-size: 8px 13px;
				border: none;
			}
			
			.prev:hover {
				background-position: center;
				background: url('icons/prev-hover.png') no-repeat;
				background-size: 8px 13px;
			}
			
			.prev:disabled {
				background-position: center;
				background: url('icons/prev-disabled.png') no-repeat;
				background-size: 8px 13px;
			}
			
			.next {
				width: 16px;
				height: 16px;
				background-position: center;
				background: url('icons/next.png') no-repeat;
				background-size: 8px 13px;
				border: none;
			}
			
			.next:hover {
				background-position: center;
				background: url('icons/next-hover.png') no-repeat;
				background-size: 8px 13px;
			}
			
			.next:disabled {
				background-position: center;
				background: url('icons/next-disabled.png') no-repeat;
				background-size: 8px 13px;
			}
			
			.search {
				border-radius: 50px;
				height: 30px;
				width: 100%;
				border: 0;
				padding: 0;
				padding-left: 104px;
			}
			
			.search-indicattor {
				position: absolute;
				left: 15px;
				width: 63px;
				font-size: 12px;
				color: #5F6266;
				line-height: 30px;
				text-decoration: none;
				background: url('icons/drop.png') no-repeat;
				background-position: right center;
				background-size: 10px 7px;
				cursor: default;
			}
			
			.search-indicattor:hover {
				color: #DB3E3E;
			}
			
			.search-indicattor-span {
				position: absolute;
				left: 75px;
				width: 30px;
				font-size: 12px;
				color: rgb(203, 203, 203);
				line-height: 30px;
				text-decoration: none;
				text-align: center;
			}
			
			.search-button {
				position: absolute;
				top: 0px;
				right: 15px;
				width: 17px;
				height: 30px;
				background: url('icons/search.png') no-repeat center;
				background-size: 17px 17px;
			}
			
			.history {
				width: 17px;
				height: 17px;
				background: url('icons/history.png') no-repeat center;
				background-size: 17px 17px;
				border: none;
			}
			
			.history:hover {
				background: url('icons/history-hover.png') no-repeat center;
				background-size: 17px 17px;
			}
			
			.login {
				width: 32px;
				height: 32px;
				background: url('icons/default-portrait.png') no-repeat center;
				background-size: 25px 25px;
				border: none;
			}
			
			.login:hover {
				border-radius: 50%;
				/*border: 1px solid white;*/
				box-shadow: 0px 0px 10px #ffffff inset;
			}
			
			.login-drop {
				width: 10px;
				height: 16px;
				background: url('icons/login-drop.png') no-repeat center;
				background-size: 10px 7px;
				border: none;
			}
			
			.mini {
				width: 30px;
				height: 30px;
				background: url('icons/mini.png') no-repeat center;
				background-size: 29px 18px;
				border: none;
			}
			
			.mini:hover {
				background: url('icons/mini-hover.png') no-repeat center;
				background-size: 29px 18px;
			}
			
			.min {
				width: 16px;
				height: 16px;
				background: url('icons/minimum.png') no-repeat center;
				background-size: 13px 2px;
				border: none;
			}
			
			.min:hover {
				background: url('icons/minimum-hover.png') no-repeat center;
				background-size: 13px 2px;
			}
			
			.max {
				width: 16px;
				height: 16px;
				background: url('icons/maximum.png') no-repeat center;
				background-size: 13px 13px;
				border: none;
			}
			
			.max:hover {
				background: url('icons/maximum-hover.png') no-repeat center;
				background-size: 13px 13px;
			}
			
			.restore {
				width: 16px;
				height: 16px;
				background: url('icons/restore.png') no-repeat center;
				background-size: 13px 13px;
				border: none;
				display: none;
			}
			
			.restore:hover {
				background: url('icons/restore-hover.png') no-repeat center;
				background-size: 13px 13px;
				
			}
			
			.close {
				width: 16px;
				height: 16px;
				background: url('icons/close.png') no-repeat center;
				background-size: 14px 13px;
				border: none;
			}
			
			.close:hover {
				background: url('icons/close-hover.png') no-repeat center;
				background-size: 14px 13px;
			}
			
			.table {
				display: table;
				background: rgb(219, 62, 62);
				height: 60px;
				width: 100%;
			}
			
			.table>* {
				display: table-cell;
				height: 100%;
			}
		</style>
	</head>

	<body>

		<div class="table drag">
			<div class="" style="width: 197px;">
				<div class="flex-column flex-middle" style="height: 60px">
					<div class="flex-column flex-middle">
						<div style="width: 20px;"> </div>
						<img class="qclogo " src="icons/logo.png" />
						<div style="width: 30px;"> </div>
						<button class="prev no-drag" id="" value=""></button>
						<div style="width: 20px;"> </div>
						<button class="next no-drag" id="" value=""></button>
						<div style="width: 15px;"> </div>
					</div>

				</div>

			</div>
			<div class="" style=" ">
				<div class="flex-column  flex-middle">
					<div style="position: relative;width: 100%;">
						<a href="javascript:void(0); " class="search-indicattor  no-drag">英汉互译</a>
						<span class="search-indicattor-span">
					 		|
					 	</span>
						<input type="text" class="search  no-drag" id="" value="" />
						<a class="search-button  no-drag"></a>
					</div>

				</div>
			</div>
			<div class="" style=" width: 285px;">
				<div class="flex-column flex-right flex-middle">
					<div style="width: 10px;"> </div>
					<button class="history no-drag" id="" value=""></button>
					<div style="width: 30px;"> </div>
					<button class="login no-drag" id="" value=""></button>
					<div style="width: 6px;"> </div>
					<button class="login-drop no-drag" id="" value=""></button>
					<div style="width: 20px;"> </div>
					<button class="mini no-drag" id="" value=""></button>
					<div style="width: 20px;"> </div>
					<button class="min no-drag" id="" value=""></button>
					<div style="width: 20px;"> </div>
					<button class="max no-drag" id="" value=""></button>
					<button class="restore no-drag" id="" value=""></button>
					<div style="width: 20px;"> </div>
					<button class="close no-drag" id="" value=""> </button>
					<div style="width: 20px;"> </div>
				</div>
			</div>
		</div>
		<!--<button class="close" id="" value=""> </button>-->

		<div class="youdao">
			<div id="" style="width: 100%;height: 100%;">
				<iframe src="index.html" style="position: absolute; top: 0 ; bottom: 0; width: 100%;height: 100%;margin: 0;padding: 0; border:none; margin:0;box-sizing: border-box; overflow: hidden;" width="100%" height="100%"></iframe>
			</div>

		</div>
	</body>
	<script type="text/javascript">
		
		$(function() {
			includes('BrowserWindow');
			var win = BrowserWindow.currentWindow;
			win.on('maximize', function(){
				$('.restore').show();
				$('.max').hide();
			});
			win.on('restore', function(){
				$('.max').show();
				$('.restore').hide();
			});


			$('.min').on('click', function() {
				win.minimize();
			});
			$('.max').on('click', function() {
				win.maximize();
			});

			$('.restore').on('click', function() {
				win.restore();
			});
			$('.close').on('click', function() {
				win.close();
			});
		});
	</script>

</html>